<template>
  <div class="login">
    <div class="login-box">
      <!-- 右侧表单 -->
      <div class="login-left">
        <div class="login-left-box">
          <loginfrom>
            <template #inpfrom>
              <div class="login-left-head">修改密码</div>
              <div class="login-left-from" id="phone">
                <p>输入新密码</p>
                <input type="password" v-model="newphone" />
                <p style="height:10px;color:red">{{imitatenewphone}}</p>
              </div>
              <div class="login-left-from">
                <p>请再次输入密码</p>
                <input type="password" id="prossword" v-model="Newagainphone"/>
                <p style="height:10px;color:red">{{imitateNewagainphone}}</p>
                <button  style="outline:none;cursor: pointer;" class="loginbtn" @click="modifypasswrod">确认</button>
                <p class="loginfoot">为保护账户安全，密码设置的规范要求如下;<br>
                1.首次登录时,必须对初始密码进行修改;<br>
                2.密码长度为8-12位;<br>
                3.密码应至少包含数字,大小写字母及特殊符号中的任意三种</p>
              </div>
            </template>
          </loginfrom>
        </div>
      </div>
      <!-- 左侧图片 -->
      <div class="login-right">
       logo
      </div>
    </div>
  </div>
</template>

<script>
import loginfrom from "@/components/login/loginfrom";
export default {
  components: {
    loginfrom,
  },
  data() {
    return {
      // 模拟token
      logintoken:"token",

      // 输入格式错误提示信息
      imitatenewphone:null,
      imitateNewagainphone:null,

      newphone:null, // 新密码
      Newagainphone:null,//再次输入的新密码
    }
  },
  methods:{
    modifypasswrod(){
      let imitatepassword=localStorage.getItem("imitatepassword")
      console.log(imitatepassword);
      console.log(this.newphone);
      var passwordstr=/^(\w){6,20}$/
      if (this.newphone==null) {
        this.imitatenewphone="新密码不能为空!"
      }else if(!passwordstr.test(this.newphone)) {
        this.imitatenewphone="新密码必须是6-20位数字或者字母组成!"
      }else if(this.Newagainphone==null) {
        this.imitatenewphone=""
        this.imitateNewagainphone="再次输入新密码不能为空!"
      }else if(imitatepassword===this.newphone){
        this.imitatenewphone="修改密码不能和初始化密码相同！"
      } else if (this.newphone===this.Newagainphone) {
        //当输入的新密码和再次输入的密码符合时,将存储在localStorage的imitatepassword 改为当前输入的新密码
        this.imitateNewagainphone=""
        localStorage.setItem("imitatepassword",this.Newagainphone)
        localStorage.setItem("logintoken",this.logintoken)
        this.$router.push("/home/")
      }else{
         this.imitateNewagainphone="新密码与再次输入的新密码不符,请重新输入!"
      }
    }


  },

  mounted(){
    this.$message({
      showClose: true,
      message: "登录成功,首次登录时,必须对初始密码进行修改",
      type: "success",
    });
  },
};
</script>








<style lang="less" scoped>
.login {
  overflow: hidden;
  width: 100%;
  height: 100%;
  background-color: #b8d9ff;
  .login-box {
    margin: 0 auto;
    margin-top: 90px;
    height: 550px;
    width: 1000px;
    background-color: white;
    //右侧表单
    .login-left {
      float: left;
      width: 50%;
      height: 100%;
      //  登录
      .login-left-box {
        margin: 0 auto;
        width: 85%;
        //  头部
        .login-left-head {
          color: #4da1ff;
          text-align: center;
          font-weight: bold;
          margin-top: 80px;
          padding-bottom: 10px;
          border-bottom: 1px solid #f3f5f7;
        }
      }
    }
    // 左侧表单
    .login-right {
      float: left;
      width: 50%;
      height: 100%;
      color: white;
      font-weight: bold;
      font-size: 100px;
      text-align: center;
      line-height: 450px;
      background-color: #4da1ff;
    }
  }
}
.loginfoot{
  margin-top: 5px;
  color: gray;
  font-size: 1px;
}

</style>

